<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>_库区占用管理</title>
    
	
	<script type="text/javascript">
	$(function(){
		$("#saveForm").validate();
	})
	var customerList = new Array();
	<c:forEach items="${customerList}" var="customer">
		customerList.push({"customerCode":"${customer.customerCode}","customerName":"${customer.customerName}"});
	</c:forEach>
	
	var warehouseList = new Array();
	<c:forEach items="${warehouseList}" var="warehouse">
	warehouseList.push({"warehouseCode":"${warehouse.groupCode}","warehouseName":"${warehouse.groupName}"});
	</c:forEach>
		var index=0;
		function addRow(event){
			
			var tr = '<tr id="tr_'+index+'" >';
            tr+='<td>';
				tr+='<select class="form-control required" id="customerCode_'+index+'" name="oacList['+index+'].customerCode" style="width:90%;" onchange="ajaxAreaGroup(this,\'warehouseCode_'+index+'\')">';
				tr+='<option value=""></option>'
				for(var i = 0 ; i < customerList.length;i++){
					tr+='<option value="'+customerList[i].customerCode+'" >'+customerList[i].customerName+'</option>';
				}
				tr+='</select>';
			tr+='</td>';
		    tr+='<td>'
			    tr+='<select class="form-control required" id="warehouseCode_'+index+'" name="oacList['+index+'].warehouseCode"  style="width:90%;" >';
				tr+='<option value=""></option>'
				for(var i = 0 ; i < warehouseList.length;i++){
					tr+='<option value="'+warehouseList[i].warehouseCode+'" >'+warehouseList[i].warehouseName+'</option>';
				}
				tr+='</select>';
		 	tr+='</td>';
			tr+='<td>';
			tr+='每&nbsp;&nbsp;<input style="width:80px;" class="required"  name="oacList['+index+'].skuNum" onKeydown="if(event.keyCode==13){addRow()}"/>&nbsp;件SKU &nbsp;占用面积&nbsp;<input style="width:80px;" class="required"  name="oacList['+index+'].occupiedArea"  onKeydown="if(event.keyCode==13){addRow()}"/> ㎡';
			tr+='</td>';
			tr+='<td>';
			tr+='<input style="width:90%;"   class="required"  name="oacList['+index+'].assignArea"   onKeydown="if(event.keyCode==13){addRow()}"/>'; 
			tr+='</td>';
			tr+='<td>';
			tr+='<input style="width:90%;" class="required"   name="oacList['+index+'].overPrice"  onKeydown="if(event.keyCode==13){addRow()}"/>'; 
			tr+='</td>';
			tr+='<td>';
			tr+='<button class="btn btn-danger" onclick="delRow('+index+')" type="button">删除</button>'; 
			tr+='</td>';
			tr += "</tr>";
			$("#tbodyId").append(tr);
			
			
			$("#customerCode_"+index).val($("#customerCode_"+(index-1)).val());
			$("#warehouseCode_"+index).val($("#warehouseCode_"+(index-1)).val());
			$("select").not(".oldSelectStyle").attr('data-placeholder','请选择...');
			 $("select").not(".oldSelectStyle").chosen({
				 search_contains: true,//搜索所有字符
				 allow_single_deselect:true, //显示取消选项按钮
				 width:"100%",
			 }).change(function(){
				 try{if($(this).valid()){$("span[for="+$(this).attr("id")+"]",$(this).parent()).remove();}}catch(e){}}
			 ); 
			 index++;
		}
		function delRow(pInex) {
			$("#tr_"+pInex).remove();
		}
		function saveAll(){
			$("#saveForm").submit();
		}
		$(function(){
			$("#trTemplate").hide();
		})
    </script>
</head>

<body>
<div id="fullbg"></div>
<div id="dialog">
	<div>
		<img src="${ctx}/static/022.gif"></img>
	</div>
</div>
<section class="content">
	<div class="row">
	<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary" >
			    
				<div class="box-header">
					<i class="fa fa-search"></i>
					<h3 class="box-title">批量添加</h3>
				</div>
				
				<div class="box-body">
				<p align="left">
						<a  data-toggle="modal" role="button"  class="btn btn-primary" onclick="addRow();">添加行(输入框内回车添加行)</a><br/>
						</p>
						<form class="form-search" id="saveForm" method="post" action="${ctx}/occupiedAreaConfig/v2_saveOccupiedAreaConfig" style="margin-top: 10px;">
				    	<table id="table_occupiedAreaConfig" class="table table-bordered table-striped">
				         <thead>
				             <tr>
				                <th style="width: 150px;">商家编码</th>
							    <th style="width: 150px;">仓库编码</th>
							    <th style="width: 200px;">SKU数量/占用面积</th>
							    <th style="width: 80px;">分配商家总面积</th>
							    <th style="width: 80px;">超出每平方单价</th>
							    <th style="width: 60px;">操作</th>
				             </tr>
				         </thead>
				         
				        
				         <tbody id="tbodyId">
				         </tbody>
				         
				     </table>
				     </form>
				</div>
			</div>

<p align="right">

				     <a  data-toggle="modal" role="button"  class="btn btn-primary" onclick="saveAll();">保存所有数据</a>
</p>
	 </div>
	</div>
</section>     
</body>
</html>
